<template>
    <div>
        <div style="margin-bottom: 15px">
            布局方向：
            <el-radio v-model="direction" label="horizontal">水平填充布局</el-radio>
            <el-radio v-model="direction" label="vertical">垂直填充布局</el-radio>
        </div>

        <div style="margin-bottom: 15px">
            填充比例：<el-slider v-model="fillRatio"></el-slider>
        </div>
        <el-space
            fill
            wrap
            :fillRatio="fillRatio"
            :direction="direction"
            style="width: 100%"
        >
            <el-card class="box-card" v-for="i in 3" :key="i">
                <template #header>
                    <div id="card-header">
                        <span>卡片标题</span>
                    </div>
                </template>
                <div v-for="o in 4" :key="o" class="text item">
                    {{  '列表内容' + o }}
                </div>

            </el-card>
        </el-space>
    </div>
</template>

<script>
export default {
    data() {
        return {
            direction: 'horizontal',
            fillRatio: 30
        }
    }
}
</script>